<template>
  <a-modal
    class="preview-modal"
    :visible="visible"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    @cancel="closeModal(false)"
    width="450px"
  >
    <a-spin tip="Loading..." :spinning="tableLoading">
      <div class="statusIcon">
        <template v-if="formData.returnGoodsStatus == 'TO_AUDIT'">
          <a-icon type="clock-circle" theme="filled" class="icon4" />
          <div class="text">待审核</div>
        </template>
        <template v-else-if="formData.returnGoodsStatus == 'REVIEW_FAILED'">
          <a-icon type="close-circle" theme="filled" class="icon6" />
          <div class="text">已驳回</div>
        </template>
        <template v-else-if="formData.returnGoodsStatus == 'REFUND_FINISH'">
          <a-icon type="check-circle" theme="filled" class="icon5" />
          <div class="text">已退款</div>
        </template>
        <template v-else>
          <a-icon type="clock-circle" theme="filled" class="icon2" />
          <div class="text">退款中</div>
        </template>
      </div>
      <div class="info">
        <div class="itemInfo">
          <div class="title">联系人</div>
          <div class="data">
            {{ orderInfo.userName || "" }}
          </div>
        </div>
        <div class="itemInfo">
          <div class="title">联系方式</div>
          <div class="data">
            {{ orderInfo.userPhone || "" }}
          </div>
        </div>
        <div class="itemInfo">
          <div class="title">活动名称</div>
          <div class="data">{{ orderInfo.goodsName || "" }}</div>
        </div>
        <div class="itemInfo">
          <div class="title">订单编号</div>
          <div class="data">{{ orderInfo.orderGoodsNo || "" }}</div>
        </div>
        <div class="itemInfo">
          <div class="title">创建时间</div>
          <div class="data">{{ orderInfo.createDate }}</div>
        </div>
        <div class="itemInfo">
          <div class="title">支付单号</div>
          <div class="data">{{ orderInfo.externalOrderNo }}</div>
        </div>
        <div class="itemInfo">
          <div class="title">支付时间</div>
          <div class="data">{{ orderInfo.orderPayTime }}</div>
        </div>
        <div class="itemInfo">
          <div class="title">支付金额</div>
          <div class="data">
            {{
              orderInfo.goodsOrderPrice
                ? (orderInfo.goodsOrderPrice / 100).toFixed(2)
                : ""
            }}元
          </div>
        </div>
        <div class="itemInfo">
          <div class="title">申请退款时间</div>
          <div class="data">{{ refuseInfo.createDate }}</div>
        </div>
        <div class="itemInfo">
          <div class="title">退款编号</div>
          <div class="data">{{ refuseInfo.id }}</div>
        </div>
        <div class="itemInfo">
          <div class="title">退款原因</div>
          <div class="data">{{ refuseInfo.reason }}</div>
        </div>
        <div
          class="itemInfo"
          v-if="formData.returnGoodsStatus == 'REFUND_FINISH'"
        >
          <div class="title">完成退款时间</div>
          <div class="data">{{ refuseInfo.updateDate }}</div>
        </div>
        <div
          class="itemInfo"
          v-if="formData.returnGoodsStatus == 'REVIEW_FAILED'"
        >
          <div class="title">驳回退款时间</div>
          <div class="data">{{ refuseInfo.updateDate }}</div>
        </div>
        <div
          class="itemInfo"
          v-if="formData.returnGoodsStatus == 'REVIEW_FAILED'"
        >
          <div class="title">驳回原因</div>
          <div class="data">{{ refuseInfo.note }}</div>
        </div>
        <div
          class="itemInfo"
          v-if="
            formData.returnGoodsStatus == 'REFUND_FINISH' ||
            formData.returnGoodsStatus == 'REFUND_OF'
          "
        >
          <div class="title">同意原因</div>
          <div class="data">
            {{ refuseInfo.note || refuseInfo.repairsNote }}
          </div>
        </div>

        <div class="itemInfo">
          <div class="title">关联导购</div>
          <div class="data">{{ orderInfo.guideName }}</div>
        </div>
      </div>
    </a-spin>

    <template slot="footer">
      <a-button key="back" @click="closeModal(false)"> 关闭 </a-button>
      <template
        v-if="
          formData.returnGoodsStatus && formData.returnGoodsStatus == 'TO_AUDIT'
        "
      >
        <permission
          authority="order:goodsrepairs:modify"
          style="margin-left: 15px"
        >
          <a-button
            key="submit"
            type="primary"
            :loading="tableLoading"
            @click="agree"
            >通过</a-button
          >
        </permission>
        <permission
          authority="order:goodsrepairs:modify"
          style="margin-left: 15px"
        >
          <a-button type="danger" :loading="tableLoading" @click="disagree">
            驳回
          </a-button>
        </permission>
      </template>
    </template>
    <checkRefund
      :visible="checkVisible"
      :opration="opration"
      @cancel="closeCheckModal"
      :orderId="orderId"
      @closeModal="closeModal"
      @getList="getList"
    ></checkRefund>
  </a-modal>
</template>
<script>
import checkRefund from "./checkRefund.vue";
export default {
  name: "refundDetails",
  components: {
    checkRefund,
  },
  props: {
    visible: {
      // 是否显示弹窗
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: {},
    },
    orderId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      tableLoading: false,
      // formData: {},
      orderInfo: {}, //订单信息
      refuseInfo: {}, //退款信息
      checkVisible: false,
      opration: "agree",
    };
  },
  watch: {
    visible(y) {
      if (y) {
        this.getOrderInfo({ id: this.orderId });
        // console.log(this.formData);
      } else {
        // this.formData = {};
      }
    },
  },
  methods: {
    closeModal(bool) {
      this.$emit("cancel", false);
    },
    //查询退款详情
    async getOrderInfo(params) {
      this.tableLoading = true;
      let res = await this.$get("order/goodsrepairs/query", params).catch(
        () => {
          this.tableLoading = false;
        }
      );
      if (res && res.returnCode == 1000) {
        this.orderInfo = res.dataInfo.orderGoods;
        this.refuseInfo = res.dataInfo.orderGoodsRepairs;
        this.tableLoading = false;
      } else {
        this.tableLoading = false;
      }
    },

    getList() {
      this.$emit("getList");
    },
    closeCheckModal() {
      this.checkVisible = false;
    },
    agree() {
      this.opration = "agree";
      this.checkVisible = true;
    },
    disagree() {
      this.opration = "disagree";
      this.checkVisible = true;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.ant-modal-footer {
  display: flex;
  justify-content: center;
}
/deep/.ant-modal-footer button + button {
  margin-left: 30px;
}
.statusIcon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  .icon1 {
    font-size: 60px;
    color: #09bb07;
  }
  .icon2 {
    font-size: 60px;
    color: #ffbe00;
  }
  .icon3 {
    font-size: 60px;
    color: #ff3131;
  }
  .icon4 {
    font-size: 60px;
    color: #10aeff;
  }
  .icon5 {
    font-size: 60px;
    color: #10aeff;
  }
  .icon6 {
    font-size: 60px;
    color: #10aeff;
  }
  .text {
    margin-top: 5px;
    text-align: center;
  }
}
.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 20px;
  width: 100%;
  .itemInfo {
    display: flex;
    justify-content: space-between;
    width: 100%;
    .title {
      width: 43%;
      text-align: right;
    }
    .data {
      width: 44%;
      text-align: left;
    }
  }
  .itemInfo + .itemInfo {
    margin-top: 7px;
  }
}
</style>